<template>
    <div class="search">
        <div class="searchHeader">
            热门搜索
        </div>
        <div class="searchContent">
            <span class="searchTag"
                v-for="tag in hotTag"
                :key="tag.key"
                @click="goSearch(tag.key)"
            >{{tag.key}}</span>
            
        </div>
        
    </div>
</template>

<script>
import { get } from "util/http"
export default {
    data(){
        return {
            hotTag:[]
        }
    },
    async mounted(){
        this.$emit("showSearch",true)
        let result=await get({
            url:"/ajax/mobileWeb/hotsearch"
        })
        this.hotTag=result.info
    },
    methods:{
        getKey(key){
            return key+new Date().getTime()+Math.random()
        },
        goSearch(keyword){
            this.$emit("changeKeywords",{keyword})
            this.$router.push({
                name:"searchList",
                params:{
                    keyword
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.search
    position relative
    .searchHeader
        height .4rem
        padding .1rem
        font-size .14rem
        color #424242
        position relative
        &:after
            content ""
            display block
            position absolute
            bottom 0
            left 0
            right 0
            margin 0 .1rem
            border-bottom 1px solid #e0e0e0
    .searchContent
        padding .1rem
        .searchTag
            display inline-block
            padding 0.04rem 0.1rem
            margin 0.05rem 0.06rem
            color #9e9e9e
            border 1px solid #9e9e9e
            border-radius .2rem
            background-color #fff
            font-size .12rem
            line-height .16rem
    
</style>